import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import * as Animatable from 'react-native-animatable';
import { Button } from '../../components';
import { dp } from "../../utils"
type Props = {
  content?:string
  color?: string,
  type: string,
  duration?:number | string,
  delay?:number | string,//todo 待调整
  direction?:"normal" | "reverse" | "alternate" | "alternate-reverse"// 动画重复运行的方向
  iterationCount?:number | "infinite" //动画运行次数
  iterationDelay?:number,
  easing?:string
}
const Base = (props: Props) => {
  const [type, setType] = useState("")
  return (
    <View style={styles.mb}>
      <Animatable.View 
      animation={type} 
      duration={Number(props.duration)} 
      delay={Number(props.delay)} 
      direction={props.direction}
      iterationCount={props.iterationCount || 1}
      iterationDelay={props.iterationDelay || 0}
      easing={props.easing}
      onAnimationEnd={() => setType("")}>
        <Button color={props.color} style={styles.w336} onPress={() => setType(props.type)} type='primary'>{props.content || props.type}</Button>
      </Animatable.View>
    </View>
  )
}
const styles = StyleSheet.create({
  w336: {
    width: dp(336)
  },
  mb: {
    marginBottom: 20,
  },
})
export default Base